import React, { JSX } from 'react';
import { NulCommonOperations, NulDialog, NulFormItem } from '../../components/NulDialog';
import { TextField } from '@mui/material';

interface ResetPasswordDialogProps {
  open: boolean;
  onClose: () => void;
}

function ResetPasswordDialog(props: ResetPasswordDialogProps): JSX.Element {
  const { open, onClose } = props;

  const [password, setPassword] = React.useState<string>('');
  const [repeatPassword, setRepeatPassword] = React.useState<string>('');
  const [passwordError, setPasswordError] = React.useState<boolean>(false);

  const clear = () => {
    setPasswordError(false);
    setPassword('');
    setRepeatPassword('');
  };

  const onResetClicked = () => {
    if (password === repeatPassword) {
      clear();
      onClose();
    }
    else {
      setPasswordError(true);
    }
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='重设密码'
      operations={
        <NulCommonOperations
          onPositiveClicked={onResetClicked}
          onNegativeClicked={() => {
            clear();
            onClose();
          }}
        />
      }
    >
      <NulFormItem hint='密码' component={
        <TextField placeholder='密码' fullWidth size='small'
          type='password' value={password}
          onChange={(event) => { setPassword(event.target.value); }}
        />
      } />
      <NulFormItem hint='重复密码' component={
        <TextField
          placeholder='重复密码' fullWidth size='small'
          type='password' value={repeatPassword}
          error={passwordError} helperText={passwordError && '两次密码不一致'}
          FormHelperTextProps={{
            sx: {
              marginLeft: '5px',
              marginTop: '2px',
              fontFamily: 'Open Sans'
            }
          }}
          onChange={(event) => { setRepeatPassword(event.target.value); }}
        />
      } />
    </NulDialog>
  );
}

export default ResetPasswordDialog;